<template>
    <div class="weather">
        <div class="city">{{ city }}</div>
        <div class="qiwen">{{ data_now.temp}}°C</div>
        <div class="tianqi"><i :class=icon id="icon_font"></i><span>{{ data_now.text }}</span></div>
        <div class="xiangqing">
            <ul>
                <li>
                    <div>风向</div>
                    <div>{{data_now.windDir}}</div>
                </li>
                <li>
                    <div>风力等级</div>
                    <div>{{data_now.windScale}}级</div>
                </li>
                <li>
                    <div>风速</div>
                    <div>{{data_now.windSpeed}}</div>
                </li>
                <li>
                    <div>近一小时降水量</div>
                    <div>{{data_now.precip}}mm</div>
                </li>
                <li>
                    <div>大气压强</div>
                    <div>{{data_now.pressure}}hPa</div>
                </li>
                <li>
                    <div>能见度</div>
                    <div>{{data_now.vis}}km</div>
                </li>
            </ul>
        </div>`
    </div>
</template>

<script setup>
import axios from 'axios';
import { reactive,ref } from "vue"
let data_now = reactive({})
let city = ref("")
let icon = ref("")

//获取天气信息
function init() {
    axios.get("https://restapi.amap.com/v3/ip?key=8223329c143d910865f5ead4f889f62a").then((res) => {
        axios.get(`https://geoapi.qweather.com/v2/city/lookup?location=${res.data.adcode}&key=2937c1738af34a358476cc6c8bce5b92`).then((res) => {
            city.value = res.data.location[0].name
            axios.get(`https://devapi.qweather.com/v7/weather/now?location=101200101&key=e07dd591fa9f4e15b25b1c35aaead41e`).then((res) => {
                data_now = res.data.now
                icon.value = "qi-"+res.data.now.icon
            })
        })
    })
}
init()

</script>

<style lang='less' scoped>
.weather {
    text-align: center;
    margin-top: .4rem;
    width: 4rem;
    border: .01rem solid rgba(156, 189, 248, 1);
    background-color: rgba(255, 255, 255, 0.8);
    font-size: .16rem;
    border-radius: .1rem;

    .city {
        width: 100%;
        font-size: .24rem;
        font-weight: 900;
        margin-top: .2rem;
        color: @0099ff-color;
    }

    .qiwen {
        width: 100%;
        font-size: .20rem;
        font-weight: 500;
        color: @0099ff-color;
        margin-top: .1rem;
    }

    .tianqi {
        height: .4rem;
        line-height: .4rem;

        #icon_font {
            font-size: .3rem;
            color: @0099ff-color;
        }

        span {
            display: inline-block;
            height: .4rem;
            font-size: .16rem;
            color: @0099ff-color;
            margin-left: .1rem;
        }
    }
}





.xiangqing {
    width: 100%;

    ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;

        li {
            width: 50%;

            div {
                height: .2rem;
                padding: .1rem 0;
                line-height: .2rem;
            }

            div:nth-child(1) {
                font-size: .2rem;
                color: #aaa;
            }

            div:nth-child(2) {
                font-size: .16rem;
                color: @0099ff-color;
            }
        }


    }
}
</style>